<template>
  <div class="proportion-of-parking-spaces">
    <div class="title">• 园区设备运行统计</div>
    <div class="proportion-chart">
      <!-- 外环 -->
      <div class="pie-ring"></div>
      <!-- 图例数据 -->
      <div class="echart-msg">
        <div class="echart-msg-item"
             v-for="item of pieDate"
             :key="item.name">
          <div> {{ item.value }} 台</div>
          <div class="echart-msg-percentage"
               :style="`color:${item.color}`">{{ item.percent }}%</div>
        </div>
      </div>
      <!-- 设备总数 -->
      <div class="device-sum">
        <div class="outer-ring">
          <div class='inner-ring'>
            <i class="iconfont icon-router"></i>
          </div>
        </div>
        <div class="sum-value">设备总数{{ deviceSum() }}台</div>
      </div>
      <echarts :data='proportionChartData'
               :heightNum='350'
               refName="proportionChartData" />
    </div>
  </div>
</template>

<script>
import echarts from '@/components/echarts'
import pieExtendConfig from './extend/pie-extend'
import { mapState } from 'vuex'
export default {
  mounted () {
    this.pieDate = []
    this.autoChart()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    clearInterval(this.timer)
    next()
  },
  data () {
    return {
      timer: '',
      pieDate: [],
      // 园区设备运行统计
      proportionChartData: {
        data: {
          columns: ['name', 'num'],
          rows: [
            { 'name': '在线设备', 'num': 80 },
            { 'name': '离线设备', 'num': 11 },
            { 'name': '故障设备', 'num': 9 }
          ]
        },
        colors: ['#00dc6a', '#ffd200', '#ff5454'],
        chartSettings: {
          type: 'ring',
          radius: [75, 100]
        },
        ...pieExtendConfig(this, 3)
      }
    }
  },
  computed: {
    ...mapState({
      refresheCharList: state => state.refresheCharList
    })
  },
  components: {
    echarts
  },
  methods: {
    deviceSum () {
      let sum = 0
      for (let i = 0; i < this.pieDate.length; i++) {
        sum += this.pieDate[i].value
      }
      return sum
    },
    autoChart () {
      clearInterval(this.timer)
      let currentIndex = -1
      this.$nextTick(() => {
        let proportionChartData = this.refresheCharList['proportionChartData']
        this.timer = setInterval(function () {
          var dataLen = 3
          if (proportionChartData) {
            // 取消之前高亮的图形
            proportionChartData.echarts.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: currentIndex
            })
            currentIndex = (currentIndex + 1) % dataLen
            // 高亮当前图形
            proportionChartData.echarts.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: currentIndex
            })
          }
        // 显示 tooltip
        // proportionChartData.echarts.dispatchAction({
        //   type: 'showTip',
        //   seriesIndex: 0,
        //   dataIndex: currentIndex
        // })
        }, 1000)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./scss/style.scss";

.proportion-of-parking-spaces {
  background-color: rgba(0, 0, 0, 0.501);
  padding: 15px;
  margin: 10px 0;

  .proportion-chart {
    position: relative;
    width: 100%;
    height: 340px;

    .device-sum {
      position: absolute;
      top: 0;
      right: 45px;
      text-align: center;
      color: #cfd0d1;

      .sum-value {
        font-size: 16px;
      }

      .outer-ring {
        width: 120px;
        height: 120px;
        border: 4px solid #00ccff;
        border-radius: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;

        .inner-ring {
          width: 95px;
          height: 95px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 120px;
          border: 3px solid #00ccff;
          background: linear-gradient(
            rgba(2, 25, 63, 0.533),
            rgba(2, 83, 137, 0.534)
          );
        }
      }
    }

    .pie-ring {
      position: absolute;
      top: 84px;
      left: 29px;
      width: 230px;
      height: 230px;
      background-image: url("~@/assets/image/ring.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }

    .echart-msg {
      position: absolute;
      top: 135px;
      left: 82%;
      color: #eee;

      .echart-msg-item {
        position: relative;
        margin-top: 44px;
      }

      .echart-msg-percentage {
        position: absolute;
        top: 22px;
        left: -54px;
        font-size: 25px;
      }
    }
  }
}
</style>
